<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<script src="../js/head_public.js"></script>
		<style>
			.yirenzheng{background:#ff7e00;border-radius: 0.5rem;border: none!important;color: #fff!important;margin-top: 0.8rem;}
		    .gengxin{font-size: 0.3rem;color: #666;margin-top: 0.8rem;display: inline-block;margin-left: 0.5rem;}
		    .sp-info-footer{height: 50px;position: fixed;bottom: 0px;left: 0px;width: 100%;overflow: hidden;}
		    .sp-info-footer div{float: left;height:100%;}
		    .car-div{width: 40%;background: #fff;}
		    .car-div span img{width: 29px;display: block;margin: auto;}
		    .car-div span{display: block;text-align: center;font-size: 14px;}
		    .gou-div{background: url(../images/gou-back.png)no-repeat center;font-size: 16px;color: #fff;line-height: 50px;width: 60%;text-align: center;}
		    .none{display: none;}
		    .jiahao{font-size: 30px;position: fixed;top: 6px;right: 5px;color: #fff;background: #000000;opacity: 0.7;width: 30px;height: 30px;border-radius: 50%;}
		    .jiahao img{width: 25px;height: 25px;display: block;margin:5px auto;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-transparent bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;background: #000;padding: 0px;margin-top: 10px;border-radius: 15px;opacity: 0.7;"></a>
             <span class="jiahao" data-href="addhuzhu.html"><img  src="../images/car-icon.png"></span>
		</header>
        
		<div class="mui-content" style="padding-bottom: 50px;">
	    	<img src="../images/goods.png" style="width: 100%;display: block;" class="tupian"/>
	    	<!--<div style="background: #fff;padding: 5px 0px;">
	    		<h1 class="sp-name shangpin-name" >味极鲜酱油 皇家酱油</h1>
	    		<div class="sp-jiage">
		    		<span  class="jg-money">￥48.5</span>
		    		<span class="pay-jifen">46.62积分</span>
		    	</div>
		    	
	    	</div>-->
	    	
	        <div class="zhekou-container none " id="zhekou-container">
	    		<div class="zhekou-number zh-price" id="zhekou-number">95%</div>
	    		<div class="kou-price">
	    			<p class="zh-price" id="zh-price">折后价：￥48</p>
	    			<p class="kou-price-yuan" id="kou-price-yuan">48</p>
	    		</div>
	    	</div>
	    	<div style="background: #fff;padding: 5px 0px;">
	    		<h1 class="sp-name shangpin-name" >味极鲜酱油 皇家酱油</h1>
	    		<div class="sp-jiage">
		    		<span  class="jg-money">￥48.5</span><span style="margin-right: 30px;margin-left: 5px;color: #999999;text-decoration: line-through;font-size: 12px;font-weight: normal;" id="yj-con"> </span>
		    		<span class="pay-jifen">46.62积分</span>
		    	</div>
		    	
	    	</div>
	    	<div class="kong"></div>
	    	<div class="sd-name" style="background: #fff;padding: 5px 5px;">
	    		<h1 class="sp-name" style="height: 30px;line-height: 30px;border-bottom: 1px solid #eeeeee;">商品详情</h1>
	    		<div class="sp-introduce" id="xiangqing">
	    			<!--迫于墙造成的各种不稳定性,mui官网已迁回国内,这个站点不再更新,请前往新官网查看文档最接近原生APP体验的高性能前端框架Hello mui 表单控件 列表样式 图文表格...
	    		    <img src="../images/banner.png" />-->
	    		</div>
	    	</div>
		</div>
		<!--<div class="zhifu-container" style="display: block;z-index: 100;">
				<div class="menban"></div>
				<div class="zhifu-content">
					<h1><img src="../images/close.png" class="close-icon">选择商品规格</h1>
					<div class="shangpin-guige">
						<div class="shangpin-icon">
							<img src="../images/goods.png" />
						</div>
						<div class="guige-container">
							<h2>尺寸</h2>
							<ul>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
							</ul>
							<h2>颜色</h2>
							<ul>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
							</ul>
							<ul class="gwc-num info-add">
				    			<li class="jian">-</li>
				    			<li class="num-con">1</li>
				    			<li class="jia">+</li>
				    		</ul>
						</div>
					</div>
					<button class="jiao-btn" style="margin-top: 20px;">确认</button>
				</div>
			</div>	-->
		<div class="zhifu-container" style="z-index: 100;">
				<div class="menban"></div>
				<div class="zhifu-content">
					<h1><img src="../images/close.png" class="close-icon  close-icon1">选择商品数量</h1>
					<div class="shangpin-guige">
						<div class="shangpin-icon">
							<img src="../images/goods.png" class="tupian" />
						</div>
						<div class="guige-container">
							<h1 style="text-align: left!important;border-bottom: none!important;margin: 0px;" class="shangpin-name only-line">选择商品规格</h1>
							<!--<h2>尺寸</h2>-->
							<!--<ul>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
							</ul>
							<h2>颜色</h2>
							<ul>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
							</ul>-->
							<ul class="gwc-num info-add">
				    			<li class="jian">-</li>
				    			<li class="num-con">1</li>
				    			<li class="jia">+</li>
				    		</ul>
						</div>
					</div>
					<button class="jiao-btn" style="margin-top: 20px;">确认</button>
				</div>
			</div>
		
		
		<div class="zhifu-container2" style="z-index: 100;">
				<div class="menban"></div>
				<div class="zhifu-content">
					<h1><img src="../images/close.png" class="close-icon close-icon2">选择商品数量</h1>
					<div class="shangpin-guige">
						<div class="shangpin-icon">
							<img src="../images/goods.png" class="tupian" />
						</div>
						<div class="guige-container">
							<h1 style="text-align: left!important;border-bottom: none!important;margin: 0px;" class="shangpin-name only-line"></h1>
							<h2 style="color: #FF0000;"><span class="jg-money">20</span></h2>
							<h2 ><span class="pay-jifen"></span></h2>
							<!--<ul>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
							</ul>
							<h2>颜色</h2>
							<ul>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
								<li flag='0'>
									s码
								</li>
							</ul>-->
							<ul class="gwc-num info-add">
				    			<li class="jian">-</li>
				    			<li class="num-con">1</li>
				    			<li class="jia">+</li>
				    		</ul>
						</div>
					</div>
					<button class="jiao-btn" id="lijibuy" style="margin-top: 20px;">确认</button>
				</div>
			</div>
		
		
		<footer class="sp-info-footer">
			<div class="car-div">
				<span><img src="../images/car-icon.png"></span>
				<span>加入购物车</span>
			</div>
			<div class="gou-div">立即购买</div>
		</footer>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-1.8.0.min.js"></script>
		<script src="../js/session.js"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript">
		
		mui.init()
		mui(".mui-content").on("tap","a",function(){
			mui.openWindow({url:$(this).attr("data-href")})
		})
		mui("header").on("tap",".jiahao",function(){
			mui.openWindow({url:"car.html"})
		})
		mui(".zhifu-content").on("tap",".close-icon1",function(){
			$(".zhifu-container").hide();
		})
		mui(".zhifu-container2").on("tap",".close-icon2",function(){	
			$(".zhifu-container2").hide();
		})
		//			购物车加减
           
             mui(".gwc-num").on("tap",".jia",function(){
             	 var num=$(".num-con").html();
             	 if(num!=null&&num!=""){
             	 	num++;
             	 	$(".num-con").html(num);
             	 	$("#jiage").html(total());
             	 	$("#jifen").html(total_jifen());
             	 }
             })
             mui(".gwc-num").on("tap",".jian",function(){
             	var num=parseInt($(this).siblings(".num-con").html());
             	 if(num!=null&&num!=""){
             	 	if(num<=1){
             	 		alert("已经最小了，不能再减了")
             	 		num=1;
             	 		$(this).siblings(".num-con").html(num);
             	 		$("#jiage").html(total());
             	 		$("#jifen").html(total_jifen());
             	 	}else{
             	 		num--;
             	 	    $(this).siblings(".num-con").html(num);
             	 	    $(".jg-money").html(total());
             	 	    $(".pay-jifen").html(total_jifen());
             	 	}
             	 	
             	 }
             })	
             var id= getQueryString("id");
             //读取商品详情
             $.post(net+'public/index.php?s=api/good/good_info',{"id":id},function(res){
             	if(res.code=="200"){
             		$(".tupian").attr("src",net+'public/uploads/home/store/goods/'+res.result.store_id+"/"+res.result.goods_image)
             	    $(".shangpin-name").html(res.result.goods_name)
             	    if(res.result.is_discount==1){
             	    	$(".jg-money").html("￥"+res.result.goods_promotion_price);
             	    	$("#yj-con").html("￥"+res.result.goods_price);
             	    	$(".zh-price").html(res.result.goods_discount+'折');
             	    	$("#zh-price").html("折后价：￥"+res.result.goods_promotion_price);
             	    	$("#kou-price-yuan").html("原价：￥"+res.result.oranial_price);
            
                         $("#zhekou-container").show()
             	    }else{
             	    	 $("#zhekou-container").hide()
             	    	$(".jg-money").html("￥"+res.result.goods_price)
             	    }
//           	    
             	    $(".pay-jifen").html(res.result.goods_point+"积分")
             	    $("#xiangqing").html(res.result.goods_body)
             	}
             })
             mui(".sp-info-footer").on("tap",".car-div",function(){
             	var userid=getCookie("userid")
             	if(userid==""||userid==null){
             		alert("您还没有登录，请先登录")
             		location.href="../public/login.html"
             	}else{
             		$(".zhifu-container").show();
             		var params={};
             		params.goods_id=id;
             		params.member_id=userid;
             		
             		
             		
             		mui(".zhifu-container").on("tap",".jiao-btn",function(){
             			var quantity=$(".zhifu-container .num-con").html();
             			if(quantity==null||quantity==""){
	             			alert("请选择数量")
	             			return false;
	             		}
             			params.quantity=quantity;
             			$.post(net+"/public/index.php?s=api/cart/add_cart",params,function(res){
             				if(res.code=="200"){
             					mui.toast("我在购物车中等你哦！")
             					$(".zhifu-container").hide();
             				}
             			})
             		})
             	}
             	
             })		
               mui(".sp-info-footer").on("tap",".gou-div",function(){
               	   var userid=getCookie("userid")
             	if(userid==""||userid==null){
             		alert("您还没有登录，请先登录")
             		location.href="../public/login.html"
             	}else{
             		$(".zhifu-container2").show();
             		var params={};           		
             		params.member_id=userid;
             		mui(".zhifu-container2").on("tap","#lijibuy",function(){
	               	    var quantity=$(".zhifu-container2 .num-con").html();
	             		if(quantity==null||quantity==""){
	             			alert("请选择数量");
	             			return false;
	             		}
	             		params.cart=id+'_'+quantity;
	               	     $.post(net+"/public/index.php?s=api/buy/buy_step1",params,function(res){
	              	 	if(res.code=="200"){
	              	 		console.log(res)
	              	 		if(res.result!=null){
	              	 			addCookie("res",JSON.stringify(res))
	              	 			mui.openWindow({
	              	 				url:"pay.html?ye=2"
	              	 			})
	              	 		}
	              	 	}
	              	 })
	               })
             	}
               	  
               })
		</script>
	</body>

</html>